import { useRef, useEffect } from "react";
import styles from "./styles/code-preview.module.less";
import classNames from "classnames";
import Marquee from "react-fast-marquee";

interface Props {
  code: string;
  plainStyle: boolean;
}

function CodePreview({ code, plainStyle = false }: Props) {
  const scrollRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollLeft = scrollRef.current.scrollWidth;
    }
  }, [code]);

  return (
    <div
      ref={scrollRef}
      className={ classNames(styles.code_box, { [styles.plain]: plainStyle }) }
    >
      {plainStyle ? <Marquee>{code}</Marquee> : code }
    </div>
  );
}

export default CodePreview;
